<template>
    <div>
    <div id="daohang" style="margin-left: 12%;margin-right: 12%">
        <div id="caidan" >
            <el-divider></el-divider>
            <ul style="height: 50px">
                <li :ref=fuquanxuan.entity.name @click="changeWidth(fuquanxuan)" >
                    <div class="caidan_big" >
                        <div class="caidan_div">
                           <span >全部</span>
                        </div>
                    </div>
                </li>
                <li @click="changeWidth(item)" :ref="item.id"    v-for="item in menuData"   class="caidan_li"  >
                    <div class="caidan_big">
                        <div class="caidan_div">
                          <el-link :underline="false">{{item.title}}</el-link>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <el-divider></el-divider>

        <div id="zi" v-show="aaa">
            <ul style="height: 50px">
                <li :ref=ziquanxuan.entity.name  @click="changezi(ziquanxuan)">
                    <div class="caidan_big1">
                        <div class="caidan_div2">
                          <el-link :underline="false">全部</el-link>
                        </div>
                    </div>
                </li>
                <li v-for="items in children" @click="changezi(items)" :ref="items.id">
                    <div class="zi_div">
                        <div class="zi_div2" >
                          <el-link :underline="false">{{items.title}}</el-link>
                        </div>
                    </div>
                </li>
            </ul>
            <el-divider></el-divider>
        </div>
      <div id="sanzi" v-show="bbb">
        <ul style="height: 50px">
          <li :ref=sanziquanxuan.entity.name  @click="changesanzi(sanziquanxuan)">
            <div class="caidan_big1">
              <div class="caidan_div2">
                <el-link :underline="false">全部</el-link>
              </div>
            </div>
          </li>
          <li v-for="items in childrens" @click="changesanzi(items)" :ref="items.id">
            <div class="zi_div">
              <div class="zi_div2" >
                <el-link :underline="false">{{items.title}}</el-link>
              </div>
            </div>
          </li>
        </ul>
        <el-divider></el-divider>
      </div>


        <div id="san">
            <ul style="height: 100px;">
                <li :ref=sanquanxuan.entity.name @click="changesan(sanquanxuan)" >
                    <div class="caidan_big1">
                        <div class="caidan_div2">
                          <el-link :underline="false">全部</el-link>
                        </div>
                    </div>
                </li>
                <li  v-for="sanitems in fufei" @click="changesan(sanitems)" :ref=sanitems.entity.name      class="caidan_li" :value="sanitems.entity.value" >
                    <div class="caidan_big">
                        <div class="caidan_div">
                          <el-link :underline="false">{{sanitems.entity.name}}</el-link>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

    </div>
  <div v-show="courses">
      <div class="big_img">
        <ul>
          <li v-for="(item,index) in courses" :ref='item.title+index' @mouseleave="bianxiao(item.title+index)"  @mouseenter="bianda(item.title+index)">
            <a @click="tiaozhuan(item.id)">
              <div class="kechengs">
                <img :src="item.cover" class="zhanshiimg">
                <span>{{ item.title }}</span><br/>
                <span>${{ item.price }}</span>
              </div>
            </a>
          </li>
        </ul>
      </div>
  </div>
    </div>
</template>

<script>
    export default {
        name: "kechengzhongxin",
        data(){
            return{
                activeIndex: ' ',

                courses:[],
                menuData: [],
                children:[],
                childrens:[],
                zichildren:[],
                fuquanxuan:{entity:{name:"fuquanxuan"}},
                ziquanxuan:{entity:{name:"zi"}},
                sanquanxuan:{entity:{name:"san"}},
                fufei:[{entity:{name:"付费"} } ,{entity:{name:"免费"}}],
                sanziquanxuan:{entity:{name:"sanzi"}},
                aaa:false,
                bbb:false,
                beijing:"",
                zibeijing:"",
                sanbeijing:"",
                sanzibeijing:"",
                //subjectid
                coucseid:"",
                //是否免费
                status:"",
                routerParams:"-1",
            }
        },
        created() {
          const routerParams = this.$route.query.key
          if(routerParams != undefined){
            this.routerParams=routerParams;
            this.coucseid=routerParams;
          }
            this.installs(this.routerParams);
            this.init();
            this.sou()
        },

        methods: {
          installs(id){
            if(id != undefined){}
            var that= this;
            this.$http.get("/core/SubandCourse/findpentBySub/"+id).then(function (resp){
              var data=resp.data.result.subject;
              var list=resp.data.result.list;
              var items
              var children
              that.changeWidth(data);
              if(data.children){
                for (let i = 0; i <list.length; i++) {
                  for (let j = 0; j < data.children.length; j++) {
                    if(data.children[j].id==list[i]){
                      items=data.children[j]
                    }
                  }
                  }
                  that.changezi(items)
                  if(items.children.length>0){
                    for (let i = 0; i <list.length; i++) {
                      for (let j = 0; j < items.children.length; j++) {
                        if(items.children[j].id==list[i]){
                          children=items.children[j]
                        }
                      }
                    }
                    that.$nextTick(function (){
                    that.changesanzi(children)})
                  }
                }
            })

          },
          bianxiao(item){
            var a =this.$refs[item][0].children[0]
            a.className=""
          },
          bianda(item){
            var a =this.$refs[item][0].children[0]
            a.className="yinying"
          },
          tiaozhuan(id) {
            this.$router.push({
              path:'/courseDetails',
              query:{
                key:id
              }
            })
          },
            init(){
                var that=this;
                this.$http.post("/core/SubandCourse/getSubjects").then(function (resp) {
                    that.menuData=resp.data.result
                })
            },
            //搜索课程
            sou(){
                var  a=this.coucseid
                if(this.zibeijing == "" || this.zibeijing=="zi"){

                }else {
                    a=this.zibeijing
                }
                if(this.sanbeijing== "" || this.sanbeijing=="san"){
                    this.status="";
                }else {

                }
              if(this.sanzibeijing == "" || this.sanzibeijing=="sanzi"){

              }else {
                a=this.sanzibeijing
              }
               var Subject = {subjectId:a ,fu:this.status}
                var that= this;
                this.$http.post("/core/SubandCourse/findCourseBySubId",Subject).then(function (resp){
                  that.courses=resp.data.result;
                })
            },

            changeWidth(item) {
            //1.判断是否是点击全选进入此方法
                //带有entity属性代表是全选按钮  'entity' in item方法判断对象中是否有 指定属性
                if('entity' in item){
                    //通过html元素定义的ref的值获取唯一的html对象
                    var ssw = this.$refs[item.entity.name].children[0].children[0].children[0].style;
                    //不然二级菜单展示
                    this.children=[];
                    this.coucseid=""
                    this.aaa=false
                }else {
                    //把item的children赋给 this.children用于遍历二级菜单
                    this.children = item.children
                    //通过html元素定义的ref的值获取唯一的html对象
                    var ssw =this.$refs[item.id][0].children[0].children[0].children[0].style;
                    //把 this.aaa改为true 用于下边判断是否呀执行二级菜单展示
                    this.aaa=true
                    //把item.id赋给this.coucseid ，便于查找
                    this.coucseid=item.id
                }


                //2.改变样式
                ssw.background = "black";
                ssw.color = "#F5F5F5"
                ssw.border = "black 5px  solid"
                ssw.radius == "15px"

                //3.把已选中的html元素修改为原来的样式
                    //判断是否上一个选择的是否为全选
                if (this.beijing == 'fuquanxuan') {
                    var bbb = this.$refs[this.beijing].children[0].children[0].children[0].style;
                } else {
                    var bbb = this.$refs[this.beijing][0].children[0].children[0].children[0].style;
                }
                bbb.background = "white";
                bbb.color = "black"
                bbb.border = "0px"

                //4.把选择的html标识存放到 this.beijing中
                if('entity' in item){
                    this.beijing ="fuquanxuan";
                }else {
                    this.beijing = item.id;
                }
              this.bbb=false
              this.childrens= []
                //通过this.aaa判断要不要执行二级菜单
                if(this.aaa){
                    this.erji()
                    this.sanji()
                    this.sanzi()
                }
                this.sanzibeijing="sanzi"
                this.sou()
            },

            changezi(items) {
              this.$nextTick(function (){
              if ('entity' in items){
                    var ssw1 = this.$refs[items.entity.name].children[0].children[0].children[0].style;
                    this.childrens=[];
                    // this.aaa=false
                this.bbb=false
                }else {
                var id= items.id
                if(items.children.length>0){
                  this.childrens=items.children
                  this.bbb=true
                }else {
                  this.bbb=false
                  this.childrens= []
                }

                var ssw1 = this.$refs[id][0].children[0].children[0].children[0].style;
                    this.aaa=true
                }
                ssw1.background = "black";
                ssw1.color = "#F5F5F5"
                ssw1.border = "black 5px  solid"
                ssw1.radius == "15px"

                if (this.zibeijing == 'zi'){
                    var bbb1 = this.$refs[this.zibeijing].children[0].children[0].children[0].style;
                }else {
                    var bbb1 = this.$refs[this.zibeijing][0].children[0].children[0].children[0].style;
                }
                bbb1.background = "white";
                bbb1.color = "black"
                bbb1.border = "0px"

                if('entity' in items){
                    this.zibeijing = "zi";
                }else {
                    this.zibeijing = items.id;
                }

                if(this.aaa){
                    this.sanji()
                }
                if(this.bbb){
                  this.sanzi()
                }
                this.sanzibeijing="sanzi"
                this.sou();
              })
            },

          changesanzi(items) {
            this.$nextTick(function (){
              if ('entity' in items){
                var ssw1 = this.$refs[items.entity.name].children[0].children[0].children[0].style;
              }else {
                var id= items.id
                var ssw1 = this.$refs[id][0].children[0].children[0].children[0].style;
              }
              ssw1.background = "black";
              ssw1.color = "#F5F5F5"
              ssw1.border = "black 5px  solid"
              ssw1.radius == "15px"

              if (this.sanzibeijing == 'sanzi'){
                var bbb1 = this.$refs[this.sanzibeijing].children[0].children[0].children[0].style;
              }else {
                var bbb1 = this.$refs[this.sanzibeijing][0].children[0].children[0].children[0].style;
              }
              bbb1.background = "white";
              bbb1.color = "black"
              bbb1.border = "0px"

              if('entity' in items){
                this.sanzibeijing = "sanzi";
              }else {
                this.sanzibeijing = items.id;
              }

              if(this.bbb){
                this.sanji()
              }
              this.sou();
            })
          },

            changesan(sanitems) {
                if(sanitems.entity.name==this.sanbeijing){

                }else {
                    var abc2 = sanitems.entity.name;
                    if (abc2 == "san") {
                        var ssw2 = this.$refs[abc2].children[0].children[0].children[0].style;
                        this.status="";
                    }else {
                        var ssw2 = this.$refs[abc2][0].children[0].children[0].children[0].style;
                        this.status=abc2;
                    }
                    ssw2.background = "black";
                    ssw2.color = "#F5F5F5"
                    ssw2.border = "black 5px  solid"
                    ssw2.radius == "15px"


                    if (this.sanbeijing == 'san') {
                        var bbb2 = this.$refs[this.sanbeijing].children[0].children[0].children[0].style;
                    }else {
                        var bbb2 = this.$refs[this.sanbeijing][0].children[0].children[0].children[0].style;
                    }
                    bbb2.background = "white";
                    bbb2.color = "black"
                    bbb2.border = "0px"

                    this.sanbeijing = abc2;
                }
                this.sou()
            },




            yiji() {
                var abc = this.fuquanxuan.entity.name;
                var ssw = this.$refs[abc].children[0].children[0].children[0].style;
                ssw.background = "black";
                ssw.color = "#F5F5F5"
                ssw.border = "black 5px  solid"
                this.beijing = abc;

            },
            erji() {
                if(this.zibeijing == "" || this.zibeijing == "zi"){

                }else {
                    var bbb1 = this.$refs[this.zibeijing][0].children[0].children[0].children[0].style;
                    bbb1.background = "white";
                    bbb1.color = "black"
                    bbb1.border = "0px"
                }
                var abc1 = this.ziquanxuan.entity.name;
                var ssw1 = this.$refs[abc1].children[0].children[0].children[0].style;
                ssw1.background = "black";
                ssw1.color = "#F5F5F5"
                ssw1.border = "black 5px  solid"
                this.zibeijing = abc1;

            },

            sanji() {
                //1.要先把上次二级菜单选择的样式取消

                //在初始化之前判断上次选中的是否为全选
                // 是否为第一次初始化
                if(this.sanbeijing == "" || this.sanbeijing == "san"){

                }else {
                    var bbb2 = this.$refs[this.sanbeijing][0].children[0].children[0].children[0].style;
                    bbb2.background = "white";
                    bbb2.color = "black"
                    bbb2.border = "0px"

                }
                //2.让全选按钮变色
                var abc2 = this.sanquanxuan.entity.name;
                var ssw2 = this.$refs[abc2].children[0].children[0].children[0].style;
                ssw2.background = "black";
                ssw2.color = "#F5F5F5"
                ssw2.border = "black 5px  solid"
                this.sanbeijing = abc2;
            },
          sanzi(){
            this.$nextTick(function (){
            if(this.sanzibeijing == "" || this.sanzibeijing == "sanzi"){
            }else {
              var bbb1 = this.$refs[this.sanzibeijing][0].children[0].children[0].children[0].style;
              bbb1.background = "white";
              bbb1.color = "black"
              bbb1.border = "0px"
              this.bbb=false
              this.childrens= []
            }
            var abc1 = this.sanziquanxuan.entity.name;
            var ssw1 = this.$refs[abc1].children[0].children[0].children[0].style;
            ssw1.background = "black";
            ssw1.color = "#F5F5F5"
            ssw1.border = "black 5px  solid"
            this.sanzibeijing = abc1;
            })
          },

        },
        mounted() {
           this.yiji();
           this.sou()
           this.sanji();
        },


    }
</script>

<style scoped>
.yinying{
  position: relative;

  top: -3px;

}.el-cascader-panel {
   background: white;
 }

#lunbo {
  height: 400px;
}

#big {
  background: rgb(228, 228, 228);
}

#big_ttt {
  background: #E4E4E4;
}

.hotcontext {
  margin-left: 12%;
  margin-right: 12%;
  margin-top: 30px;

}

.hotcontext:after {
  clear: both;
  content: "";
  width: 0;
  height: 10px;
  display: block;
  visibility: hidden;
}

.context {

  margin-left: 12%;
  margin-right: 12%;
  margin-top: 30px;
  padding-bottom: 20px;
}

.context:after {
  clear: both;
  content: "";
  width: 0;
  height: 0;
  display: block;
  visibility: hidden;
}

.big_con_lin1 {
  display: inline;
  float: left;

}
a{ text-decoration:none}

.big_con_lin2 {
  display: inline;
  float: right;
}

.big_img > ul > li {
  width: 20%;
  height: 204px;
  margin-bottom: 20px;
  border-radius: 9px;
}

.kechengs {
  width: 90%;
  margin: auto;
  padding: 0px;
  background: #FFFFFF;
  border-radius: 9px;
}

.el-menu {
  width: 200px;
  height: 100%;
  z-index: 100
}

.zhanshiimg {
  width: 100%;
  height: 140px;
}

ul {
  list-style: none;
  padding: 0px;
}

.big_img > ul > li {
  float: left;
}

.big_img {
  margin-left: 12%;
  margin-right: 12%;

}

.big_img > ul:after {
  clear: both;
  content: "";
  width: 0;
  height: 0;
  display: block;
  visibility: hidden;
}

    #caidan > ul > li{
        float: left;
        padding: 20px;
        margin-left: 15px;
    }
    .caidan_div{

        text-align: center;
    }
    ul{
        list-style: none;
    }
    #zi > ul > li{
        float: left;
        padding: 30px;
    }
    #sanzi  > ul > li{
      float: left;
      padding: 30px;
    }
    #sanzi> ul > li{
      float: left;
    }
    #san > ul > li{
        float: left;
        padding: 30px;
    }
    span{
        border-radius: 7px;
    }
    .el-link{
      padding-top: 3px;
      padding-right: 3px;
      padding-left: 3px;
      border-radius: 7px;
    }
    #zi > ul > li{
        float: left;
    }
    #san > ul > li{
        float: left;
    }
    #caidan > ul{
    }
    .el-divider--horizontal{
        margin-left: 20px;
    }
    .el-divider--horizontal{
        width: 95%;
    }
.kechengs > img {
  border-radius: 8px 8px 0px 0px;
}

</style>